<template>
	<view class="user u-skeleton" :class="themeName">
		<view class="user-info flex-col" :style="[bgStyle]">
			<u-gap height="40"></u-gap>
			<view class="user-top flex flex-1">
				<view class="m-l-30 flex-1">
					<view class="nr white m-t-10">{{$zhTran('可提现收益(元)')}}</view>
					<view class="white m-t-30 m-b-10" style="font-size: 70rpx;">{{userInfo.user_earnings}}</view>
				</view>
				<view class="withdraw-btn" @click="toWithdraw">
					<text class="m-r-10">{{$zhTran('去提现')}}</text>
					<u-icon name="arrow-right" color="#fff"></u-icon>
				</view>
			</view>
			<u-gap height="40"></u-gap>

			<view class="p-l-20 p-r-20">
				<view class="top-tab item-tab">
					<view class="data-tab flex row-around">
						<view>
							<view class="number">{{swoInfo.work_profit||0}}</view>
							<view class="desc">{{$zhTran('进展收益')}}</view>
						</view>
						<view>
							<view class="number">{{swoInfo.done_profit||0}}</view>
							<view class="desc">{{$zhTran('完成收益')}}</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="order-item">
			<view class="order-item-box">
				<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				auto: false,
				noMoreSize: 3,
				empty: {
					icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
					tip: $zhTran('暂无订单~'),
					fixed: true
				}
			}" :bottom="0" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="order-contain">
						<view class="order" v-for="orderItem in orderList" :key="orderItem.id">
							<view class="box-main m-l-10">
								<view class="flex row-between u-border-bottom p-b-20">
									<view>{{$zhTran('工单编号：')}}{{orderItem.sn}}</view>
									<view class="badge m-l-20" :class="[statusDesc[orderItem.status]]">
										{{orderItem.status_desc}}
									</view>
								</view>
								<view class="flex row-between m-t-20 m-b-20">
									<view style="font-size: 32rpx;">{{$zhTran('收益金额')}}</view>
									<view class="m-l-10 m-r-10">
										<price :content="orderItem.total_amount" prefix="￥" main-size="46rpx"
											minor-size="32rpx" color="rgba(238, 10, 37, 1)" />
									</view>
								</view>
								<view class="flex m-t-20 m-b-20 desc">
									{{$zhTran('结算状态：')}}{{orderItem.settlement_status_desc}}
								</view>
								<view class="flex m-t-20 m-b-20 desc">{{$zhTran('结算时间：')}}{{orderItem.settlement_time}}
								</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>

		<u-tabbar v-model="current" :list="navList" active-color="rgba(64, 115, 250, 1)"
			inactive-color="rgba(133, 133, 133, 1) " @change="toTabbar"></u-tabbar>

		<loading-view v-show="loading"></loading-view>

	</view>
</template>

<script>
	import {
		apiServiceWorkOrderInfo,
		apiServiceWorkOrderOrderList
	} from "@/api/service_work_order"
	import {
		navList
	} from "./nav"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				current: 2,
				navList: this.$zhTran(navList),
				orderList: [],
				swoInfo: {},
				loading: false,
				statusDesc: ['new', 'work', 'check', 'done', 'cancel'],
			}
		},
		created() {},
		computed: {
			bgStyle() {
				return {
					'background-image': `url(${this.$getImageUri('resource/image/shopapi/service_work_order/profit.png')})`,
				}
			}
		},
		onShow() {
			this.refreshOrderData()
		},
		onLoad() {
			this.getServiceWorkOrderInfo()
		},
		methods: {
			getServiceWorkOrderInfo() {
				apiServiceWorkOrderInfo().then(res => {
					this.swoInfo = this.$zhTran(res);
					if (Object.keys(res).length > 0) {
						this.loading = false
					} else {
						this.$Router.replace('/pages/user/user')
					}
				})
			},
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},
			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiServiceWorkOrderOrderList({
					order_type: 'other_work',
					accendant_user: this.userInfo.id,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.orderList = []
					this.orderList = [...this.orderList, ...lists]
					this.orderList = this.$zhTran(this.orderList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			toWithdraw() {
				this.$Router.push({
					path: '/bundle/pages/user_withdraw/user_withdraw'
				})
			},
			toTabbar(idx) {
				this.$Router.replaceAll({
					path: this.navList[idx].path,
					query: {}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.user-info {
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.user-top {
			padding: 0 30rpx;
			// #ifdef  H5
			padding-top: 30rpx;
			// #endif

			.withdraw-btn {
				position: absolute;
				right: 0;
				top: 60rpx;
				border-radius: 50rpx 0 0 50rpx;
				color: #fff;
				background-color: rgba(255, 141, 26, 1);
				font-size: 26rpx;
				padding: 15rpx 25rpx;
			}
		}
	}

	.body {
		position: relative;
	}

	.top-tab {
		width: 100%;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}


	.item-tab {
		margin-bottom: 20rpx;

		.title {
			color: rgba(47, 47, 47, 1);
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.data-tab {
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			text-align: center;

			.number {
				color: rgba(58, 58, 58, 1);
				font-size: 38rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.desc {
				color: rgba(128, 128, 128, 1);
				font-size: 26rpx;
			}
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		.box-main {
			width: 100%;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(22, 22, 22, 1);
			}

			.badge {
				padding: 10rpx 20rpx;
				border-radius: 6rpx;
				margin-right: 10rpx;
				font-size: 24rpx;

				&.new {
					background-color: rgba(64, 115, 250, 1);
					color: #fff;
				}

				&.work {
					background-color: rgba(255, 141, 26, 1);
					color: #fff;
				}

				&.check {
					background-color: rgba(245, 114, 108, 1);
					color: #fff;
				}

				&.done {
					background-color: rgba(103, 194, 69, 1);
					color: #fff;
				}

				&.cancel {
					background-color: rgba(153, 153, 153, 1);
					color: #fff;
				}
			}

			.desc {
				color: rgba(128, 128, 128, 1);
				font-size: 24rpx;
			}

		}

	}

	.badge {
		padding: 10rpx 20rpx;
		border-radius: 6rpx;
		margin-right: 10rpx;
		font-size: 24rpx;

		&.new {
			background-color: rgba(64, 115, 250, 1);
			color: #fff;
		}

		&.work {
			background-color: rgba(255, 141, 26, 1);
			color: #fff;
		}

		&.check {
			background-color: rgba(245, 114, 108, 1);
			color: #fff;
		}

		&.done {
			background-color: rgba(103, 194, 69, 1);
			color: #fff;
		}

		&.cancel {
			background-color: rgba(153, 153, 153, 1);
			color: #fff;
		}
	}
</style>